<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Weather Icons - Icon Font inspired by Font Awesome and designed for Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <section class="content container iconExamples reference">
      <div class="row">
        <div class="col-sm-12">
          <div class="reference">Day / Sunny</div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-day-cloudy-gusts"></i></div>
            <div class="class">wi-day-cloudy-gusts</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-cloudy-windy"></i></div>
            <div class="class">wi-day-cloudy-windy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-cloudy"></i></div>
            <div class="class">wi-day-cloudy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-fog"></i></div>
            <div class="class">wi-day-fog</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-hail"></i></div>
            <div class="class">wi-day-hail</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-lightning"></i></div>
            <div class="class">wi-day-lightning</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-day-rain-mix"></i></div>
            <div class="class">wi-day-rain-mix</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-rain-wind"></i></div>
            <div class="class">wi-day-rain-wind</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-rain"></i></div>
            <div class="class">wi-day-rain</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-showers"></i></div>
            <div class="class">wi-day-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-snow"></i></div>
            <div class="class">wi-day-snow</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-sprinkle"></i></div>
            <div class="class">wi-day-sprinkle</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-day-sunny-overcast"></i></div>
            <div class="class">wi-day-sunny-overcast</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-sunny"></i></div>
            <div class="class">wi-day-sunny</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-storm-showers"></i></div>
            <div class="class">wi-day-storm-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-day-thunderstorm"></i></div>
            <div class="class">wi-day-thunderstorm</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="reference">Neutral / Cloudy</div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-cloudy-gusts"></i></div>
            <div class="class">wi-cloudy-gusts</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-cloudy-windy"></i></div>
            <div class="class">wi-cloudy-windy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-cloudy"></i></div>
            <div class="class">wi-cloudy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-fog"></i></div>
            <div class="class">wi-fog</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-hail"></i></div>
            <div class="class">wi-hail</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-lightning"></i></div>
            <div class="class">wi-lightning</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-rain-mix"></i></div>
            <div class="class">wi-rain-mix</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-rain-wind"></i></div>
            <div class="class">wi-rain-wind</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-rain"></i></div>
            <div class="class">wi-rain</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-showers"></i></div>
            <div class="class">wi-showers</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-snow"></i></div>
            <div class="class">wi-snow</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-sprinkle"></i></div>
            <div class="class">wi-sprinkle</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-storm-showers"></i></div>
            <div class="class">wi-storm-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-thunderstorm"></i></div>
            <div class="class">wi-thunderstorm</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="reference">Night / Moons</div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-night-alt-cloudy-gusts"></i></div>
            <div class="class">wi-night-alt-cloudy-gusts</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-cloudy-windy"></i></div>
            <div class="class">wi-night-alt-cloudy-windy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-hail"></i></div>
            <div class="class">wi-night-alt-hail</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-lightning"></i></div>
            <div class="class">wi-night-alt-lightning</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-rain-mix"></i></div>
            <div class="class">wi-night-alt-rain-mix</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-rain-wind"></i></div>
            <div class="class">wi-night-alt-rain-wind</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-rain"></i></div>
            <div class="class">wi-night-alt-rain</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-showers"></i></div>
            <div class="class">wi-night-alt-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-snow"></i></div>
            <div class="class">wi-night-alt-snow</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-night-alt-sprinkle"></i></div>
            <div class="class">wi-night-alt-sprinkle</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-storm-showers"></i></div>
            <div class="class">wi-night-alt-storm-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-alt-thunderstorm"></i></div>
            <div class="class">wi-night-alt-thunderstorm</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-clear"></i></div>
            <div class="class">wi-night-clear</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-cloudy-gusts"></i></div>
            <div class="class">wi-night-cloudy-gusts</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-cloudy-windy"></i></div>
            <div class="class">wi-night-cloudy-windy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-cloudy"></i></div>
            <div class="class">wi-night-cloudy</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-hail"></i></div>
            <div class="class">wi-night-hail</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-lightning"></i></div>
            <div class="class">wi-night-lightning</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-night-rain-mix"></i></div>
            <div class="class">wi-night-rain-mix</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-rain-wind"></i></div>
            <div class="class">wi-night-rain-wind</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-rain"></i></div>
            <div class="class">wi-night-rain</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-showers"></i></div>
            <div class="class">wi-night-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-snow"></i></div>
            <div class="class">wi-night-snow</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-sprinkle"></i></div>
            <div class="class">wi-night-sprinkle</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-storm-showers"></i></div>
            <div class="class">wi-night-storm-showers</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-thunderstorm"></i></div>
            <div class="class">wi-night-thunderstorm</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="reference">Miscellaneous Weather </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-celcius"></i></div>
            <div class="class">wi-celcius</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-cloud-down"></i></div>
            <div class="class">wi-cloud-down</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-cloud-refresh"></i></div>
            <div class="class">wi-cloud-refresh</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-cloud-up"></i></div>
            <div class="class">wi-cloud-up</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-cloud"></i></div>
            <div class="class">wi-cloud</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-degrees"></i></div>
            <div class="class">wi-degrees</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-down-left"></i></div>
            <div class="class">wi-down-left</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-down"></i></div>
            <div class="class">wi-down</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-fahrenheit"></i></div>
            <div class="class">wi-fahrenheit</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-horizon-alt"></i></div>
            <div class="class">wi-horizon-alt</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-horizon"></i></div>
            <div class="class">wi-horizon</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-left"></i></div>
            <div class="class">wi-left</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-lightning"></i></div>
            <div class="class">wi-lightning</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-night-fog"></i></div>
            <div class="class">wi-night-fog</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-refresh-alt"></i></div>
            <div class="class">wi-refresh-alt</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-refresh"></i></div>
            <div class="class">wi-refresh</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-right"></i></div>
            <div class="class">wi-right</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-sprinkles"></i></div>
            <div class="class">wi-sprinkles</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-strong-wind"></i></div>
            <div class="class">wi-sunrise</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-sunrise"></i></div>
            <div class="class">wi-sunrise</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-sunset"></i></div>
            <div class="class">wi-sunset</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-thermometer-exterior"></i></div>
            <div class="class">wi-thermometer-exterior</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-thermometer-internal"></i></div>
            <div class="class">wi-thermometer-internal</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-thermometer"></i></div>
            <div class="class">wi-thermometer</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="example">
            <div class="icon"><i class="wi-tornado"></i></div>
            <div class="class">wi-tornado</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-up-right"></i></div>
            <div class="class">wi-up-right</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-up"></i></div>
            <div class="class">wi-up</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-east"></i></div>
            <div class="class">wi-wind-east</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-north-east"></i></div>
            <div class="class">wi-wind-north-east</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-north-west"></i></div>
            <div class="class">wi-wind-north-west</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-north"></i></div>
            <div class="class">wi-wind-north</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-south-east"></i></div>
            <div class="class">wi-wind-south-east</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-south-west"></i></div>
            <div class="class">wi-wind-south-west</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-south"></i></div>
            <div class="class">wi-wind-south</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-wind-west"></i></div>
            <div class="class">wi-wind-west</div>
          </div>
          <div class="example">
            <div class="icon"><i class="wi-windy"></i></div>
            <div class="class">wi-windy</div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="container">
        <div class="row-fluid">
          <div class="col-sm-12"> 
            <p>The Weather Icons project created and maintained by  <a href="http://www.twitter.com/Erik_UX">Erik Flowers</a>. Original artwork by  <a href="http://www.twitter.com/artill">Lukas Bischoff.</a></p>
            <p>LESS/HTML implementation inspired and heavily influenced by  <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a></p>
            <p>Weather Icons licensed under <a http://scripts.sil.org/OFL>SIL OFL 1.1</a> &mdash; Code licensed under  <a http://opensource.org/licenses/mit-license.html>MIT License</a>  &mdash; Documentation licensed under  <a http://creativecommons.org/licenses/by/3.0/>CC BY 3.0</a></p>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>